<template>
  <div class="main">
    <div class="head">
      <div class="heaeg-img">
  
      </div>
      <div class="head-title">
        {{loginMessge}}
      </div>
  
    </div>
  
    <div class="icon-list">
      <grid :rows="2">
        <grid-item :link="{ path: '/demos/public-msg-proj'}"
                   class="grid-item">
          <div class="custom-img">
            <img src="../../assets/img/public-msg-proj.png">
          </div>
          <div class="custom-label">项目动态</div>
        </grid-item>
  
        <grid-item :link="{ path: '/demos/z-b-publish'}"
                   class="grid-item"
                   style="background-color: #ef5f7b;">
          <div class="custom-img">
            <img src="../../assets/img/z-b-publish.png">
          </div>
          <div class="custom-label">中标公示</div>
        </grid-item>
      </grid>
      <grid :rows="2">
        <grid-item :link="{ path: '/demos/my-invite-bid'}"
                   class="grid-item"
                   style="background-color: #ef7d5f;">
          <div class="custom-img">
            <img src="../../assets/img/invite-bid.png">
          </div>
          <div class="custom-label">我的投标</div>
        </grid-item>
        <grid-item :link="{ path: '/demos/message-receive'}"
                   class="grid-item"
                   style="background-color: #f0b467;">
          <div class="custom-img">
            <img src="../../assets/img/message-receive.png">
          </div>
          <div class="custom-label">我的通知
  
          </div>
          <div class="message-tile"
               v-show="isLogin&&messageCount!=0">{{messageCount}}</div>
        </grid-item>
      </grid>
      <grid :rows="2">
  
        <grid-item :link="{ path: '/demos/xh-login'}"
                   class="grid-item"
                   style="background-color: #766af3;"
                   v-show="!isLogin">
          <div class="custom-img">
            <img src="../../assets/img/xh-login.png">
          </div>
          <div class="custom-label">登录</div>
        </grid-item>
  
        <grid-item class="grid-item"
                   style="background-color: #766af3;"
                   v-show="isLogin"
                   @on-item-click="loginOut">
          <div class="custom-img">
            <img src="../../assets/img/xh-login-out.png">
          </div>
          <div class="custom-label">退出登录</div>
        </grid-item>
  
        <grid-item :link="{ path: '/demos/my-suggest'}"
                   class="grid-item"
                   style="background-color: #50c273;">
          <div class="custom-img">
            <img src="../../assets/img/my-suggest.png">
          </div>
          <div class="custom-label">投诉建议</div>
        </grid-item>
      </grid>
    </div>
  </div>
</template>



<script>
import { Grid, GridItem, GroupTitle, Confirm, TransferDomDirective as TransferDom } from 'vux'
import { MessageReceiveService } from '../../service/Services.js'
export default {
  components: {
    Grid,
    GridItem,
    GroupTitle,
    Confirm,
    TransferDom
  },
  data () {
    return {
      loginMessge: '',
      isLogin: false,
      messageCount: 0
    }
  },
  methods: {
    initData () {
      let userInfo = this.$store.getters.getUserInfo
      this.loginMessge = userInfo == null ? '' : '欢迎您!' + userInfo.LoginName
      this.isLogin = userInfo != null
      if (this.isLogin) {
        MessageReceiveService.GetMessageCount(this.$store.getters.getUserInfo.ProviderGUID).then(res => {
          this.messageCount = res.Data[0].Count
        })
      }
    },
    loginOut () {
      var me = this
      this.$vux.confirm.show({
        title: '退出登录',
        content: '确定退出当前用户吗?',
        onConfirm () {
          me.loginMessge = ''
          me.isLogin = false
          me.$store.dispatch('removeUserInfo')
        }
      })
    }
  },
  mounted () {
    this.initData()
  }
}
</script>

<style scoped lang="less">
.main {
  width: 100%;
  background: url(../../assets/img/login-bg.png) no-repeat;
  height: 100%;
  background-size: 100% 100%;
  .head {
    margin-bottom: 10px;
    padding-top: 50px;
    .heaeg-img {
      margin: 0 auto;
      width: 208px;
      height: 44px;
      background: url(../../assets/img/xh-logo.png) no-repeat;
      background-size: 100% 100%;
    }
    .head-title {
      font-family: PingFangSC-Regular;
      font-size: 16px;
      color: #888888;
      letter-spacing: 0;
      text-align: center;
      margin-top: 22px;
    }
  }
  .icon-list {
    padding: 0 30px;
    .grid-item {
      background-color: #38afe7;
      padding-bottom: 20px;
      padding-top: 30px;
      .custom-img {
        text-align: center;
        height: 100%;
        img {
          width: 40px;
          height: 40px;
        }
      }
      .custom-label {
        text-align: center;
        color: white;
        font-size: 16px;
        text-overflow: ellipsis;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }
}

.message-tile {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: red;
  color: white; // padding:5px 5px 0px 5px;
  top: 10px;
  left: 55%;
  text-align: center;
  padding-bottom: 5px;
  border-radius: 50%;
}
</style>
